import React from 'react'

import './index.css'

export default function Share() {

    const page = [
        {
            id: '001',
            title: 'this is title',
            info: 'this is content',
            user: '小王',
            time: '2002/5/3',
            view: '100',
            type: '学术学科',
            image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ru1ogDk7eqoT4BMc90k9pAHaHa?w=203&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7',
            link: 'http://www.baidu.com'

        }
    ]
    const hot = [
        {
            id:'001',
            title: 'title1',
            link:'http://www.baidu.com'
        },
        {
            id:'002',
            title: 'title2',
            link:'www.baidu.com'
        },
        {
            id:'003',
            title: 'title3',
            link:'www.baidu.com'
        }
    ]
    const cpt = [
        {
            id:'001',
            title: 'cpt1',
            link:'www.baidu.com'
        },
        {
            id: '002',
            title: 'cpt2',
            link: 'www.baidu.com'
        },
        {
            id: '003',
            title: 'cpt3',
            link: 'www.baidu.com'
        },

    ]

    return (
        <div className={'share'}>
            <div className={'share-box'}>
                <div className='nav'>
                    <span>今日话题</span>
                </div>
                <div className='info'>
                    {
                        page.map((item) => {
                            return (
                                <div key={item.id} className='info-box'>
                                    <a href={item.link} target={'_blank'} rel='noopener noreferrer'><h3>{item.title}</h3></a>
                                    <span>
                                        <div>{item.info}</div>
                                        <img src={item.image} alt="err" />
                                    </span>
                                    <div className='foot'>
                                        <p className='iconfont icon-yonghu-yuan'>{item.user}</p>
                                        <p className='iconfont icon-riqi'>{item.time}</p>
                                        <p className='iconfont icon-yanjing'>{item.view}</p>
                                        <p>{item.type}</p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className={'share-right'}>
                <div className={'share-hot'}>
                    <div className='nav'>
                        <span>热门话题</span>
                    </div>
                    <div className='info'>
                        {
                            hot.map((itme) => {
                                return (
                                    <div key={itme.id} className='info-box'>
                                        <a href={itme.link} target={'_blank'} rel='noopener noreferrer'>
                                            {itme.title}
                                        </a>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className={'share-cpt'}>
                    <div className='nav'>
                        <span>最近比赛</span>
                    </div>
                    <div className='info'>
                        {
                            cpt.map((itme) => {
                                return (
                                    <div key={itme.id} className='info-box'>
                                        <a href={itme.link} target={'_blank'} rel='noopener noreferrer'>
                                            {itme.title}
                                        </a>
                                    </div> 
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}